<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<!--suppress ALL-->
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>团队活动|蜗牛宠物领养平台</title>

    <link rel="shortcut icon" th:href="@{/asserts/images/favicon.ico}" type="image/x-icon"/>
    <!-- Bootstrap的css -->
    <link rel="stylesheet" th:href="@{/asserts/bootstrap3.4.1/css/bootstrap.min.css}">
    <!-- jQuery本地-->
    <script th:src="@{/asserts/js/jQuery-3.6.0.js}"></script>
    <!-- 加载本地js -->
    <script th:src="@{/asserts/bootstrap3.4.1/js/bootstrap.min.js}"></script>
    <!-- 加载common.css -->
    <link rel="stylesheet" th:href="@{/asserts/css/common.css}"/>
    <!-- 加载页头页尾css -->
    <link rel="stylesheet" th:href="@{/asserts/css/top.css}"/>
    <link rel="stylesheet" th:href="@{/asserts/css/foot.css}"/>

</head>
<body>
<!-- 页头 -->
<nav th:replace="nav::headerBar"></nav>


<div class="container">


    <div style="height: 100px">
        <h1 style="text-align: center;font-style: italic; font-size: 100px;color:#0f0f0f;">精彩评论</h1>
    </div>

    <th:block th:if="${pagePet != null}">


        <div style="height: 700px; margin-top: 100px">

            <li th:each="p : ${pagePet.list}" style="margin-bottom: 20px ; overflow:hidden">
                <div style="height: 210px ;
                 width: 210px ;
                 color: #0f0f0f;
                 font-size: 20px;
                 float: left ;">
                    <img th:src="'https://woniu-adopt.oss-cn-hangzhou.aliyuncs.com/adoptImages/'+${p.image}"
                         style="width: 200px;height:200px; border-radius: 5px; cursor: pointer;">
                </div>
                <label style="font-size: 20px;">宠物名称 : </label>
                <div th:text="${p.name}" style="font-size: 20px"></div>
                <label style="font-size: 20px;">宠物简介 : </label>
                <div th:text="${p.introduce}" style="font-size: 20px"></div>
                <!--thymeleaf绑定事件-->
                <button type="button" class="btn btn-success" th:onclick="openForm([[${p.id}]])">评论区</button>

            </li>


        </div>


        <div>
            <span class="btn-lg" style="margin-left: 100px;">总宠物数:</span><span class="btn-lg"
                                                                               th:text="${pagePet.total}"></span>
            <span class="btn-lg">总页数:</span><span class="btn-lg" th:text="${pagePet.pages}"></span>
            <span class="btn-lg">当前页:</span><input id="jumpNow" style="width: 25px;" th:value="${pagePet.pageNum}">
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <button type="button" class="btn btn-success" onclick="jump()">跳转</button>
            <button type="button" class="btn btn-success btn-lg" style="margin-left: 100px;" onclick="go(1)">首页</button>
            <button type="button" class="btn btn-success btn-lg" th:onclick="go([[${pagePet.prePage}]])">上一页</button>
            <button type="button" class="btn btn-success btn-lg" th:onclick="go([[${pagePet.nextPage}]])">下一页</button>
            <button type="button" class="btn btn-success btn-lg" th:onclick="go([[${pagePet.pages}]])">尾页</button>
        </div>
    </th:block>
    <div>
        <!-- Modal -->
        <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                                aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title" id="myModalLabel">评论 : </h4>
                    </div>
                    <div class="modal-body">
                        <table class="table table-striped" id="myTable">
                            <tr>
                                <td>评论人</td>
                                <td>时间</td>
                                <td>内容</td>
                                <td>回复</td>
                            </tr>
                        </table>
                    </div>

                    <form id="myform">
                        <div class="modal-body">
                            <input type="text" class="pid" id="pid" name="pid" value="" hidden>
                            <input type="text" class="uid" id="uid" name="uid" th:value="${session.User.id}" hidden>
                            <textarea name="context" type="text" style="width: 570px; height: 50px; "
                                      placeholder="请发表评论！"></textarea>
                        </div>
                    </form>

                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                        <button type="button" class="btn btn-primary" th:onclick="save()">评论</button>
                    </div>
                </div>
            </div>
        </div>


    </div>

</div>

<!-- 页尾 -->
<footer th:replace="nav::footBar"></footer>
</body>

<style>


</style>


<script>

    function go(now) {
        if (now == 0) {
            return;
        } else {
            let url = '[[@{/comment/listPet}]]' + '?now=' + now;
            window.location.href = url;
        }
    }

    function jump() {
        let now = $("#jumpNow").val();
        go(now);
    }

    function openForm(id) {
        $.ajax({
            url: '[[@{/comment/getCommentByKey}]]',
            data: {
                "id": id
            },
            type: "get",
            dataType: "json",
            success: function (obj) {
                //console.log(obj)
                $("#myTable  tr:not(:first)").html("");
                if (obj == null || obj == "") {
                } else {
                    for (a of obj) {
                        $("tr:last").after(`
                                <tr>
                                    <td style="color: skyblue">` + a.userName + `</td>
                                    <td>` + a.insertTime + `</td>
                                    <td>` + a.message + `</td>
                                    <td>` + a.answerUser + `</td>
                                </tr>
                           `);
                    }
                }

            }
        });
        document.getElementById("pid").value=id;
        console.log(id)
        $('#myModal').modal("show");
    }

    //提交修改，返回是否修改成功
    function save() {
        console.log($("#myform").serialize());
        let uid = '[[${session.User.id}]]';
        if (uid == 0) {
            alert("请先登录！！！");
            return;
        }
        $.ajax({
            url: '[[@{/comment/save}]]',
            data: $("#myform").serialize(),
            type: "post",
            success: function (msg) {
                if (msg == "ok") {
                    $("#myModal").modal('hide');
                    // location.href = "manager?op=showAllUser";
                    //原地刷新
                    location.reload();
                } else {
                    alert("---对不起，评论失败！---");
                }

            }
        })
    }
</script>
</html>